import { useState, useCallback } from "react";
import { Form, Popup, Slider, Input, Rate, Space } from 'antd-mobile';
import { SmileOutline } from 'antd-mobile-icons';
import { TypeaheadInputMulti } from 'react-bootstrap-typeahead';
import { DragToken } from './DragToken';

export function QATypeaheadInputMulti({ inputProps, qa, onMove, props, onScoreChange }) {
    const [activeToken, setActiveToken] = useState();
    const [activeMaxScore, setActiveMaxScore] = useState(100);
    const getMaxScore = label => ["语文", "数学", "外语"].findIndex(sub => sub === label) > -1 ? 150 : 100;
    const renderTokenInput = ({ score, label }) => {
        const scoreUnderMaxScore = Math.round(score * getMaxScore(label) / 100);
        return score === scoreUnderMaxScore ? score : <>{score} <span style={{ color: '#229880', fontWeight: 'bold' }}>|{scoreUnderMaxScore}</span></>;
    };
    const clickToken = useCallback((token) => {
        let maxScore = getMaxScore(token.label);
        setActiveToken({ ...token, score: token.score * maxScore / 100 });
        setActiveMaxScore(maxScore);
    }, []);
    const changeActiveTokenScore = useCallback(
        (v) => {
            if (v >= 0 && v <= activeMaxScore) {
                setActiveToken({ ...activeToken, score: v });
                onScoreChange({ ...activeToken, score: Math.round(v * 100 / activeMaxScore) });
            }
        },
        [activeToken, activeMaxScore, onScoreChange]
    );
    return <>
        <TypeaheadInputMulti {...inputProps} selected={qa.answer || []}>
            {(qa.answer || []).map((option, idx) => {
                return (
                    <DragToken
                        index={idx}
                        key={option.label}
                        onMove={onMove}
                        onRemove={props.onRemove}
                        option={option}
                        style={{ color: '#19556e' }}
                        className={option.label === activeToken?.label ? 'rbt-token-active' : ''}
                        onClick={() => clickToken(option)}
                    >
                        {option.label}
                        {qa.type === 0 && <span
                            style={{ marginLeft: "0.2em", color: "#227597", verticalAlign: "text-top", fontSize: "0.7em" }}>
                            {renderTokenInput(option)}
                        </span>}
                    </DragToken>
                );
            })}
        </TypeaheadInputMulti>
        {(activeToken && qa.type === 0) && <Popup
            visible={activeToken}
            onMaskClick={() => setActiveToken(undefined)}
            onClose={() => setActiveToken(undefined)}
        >
            <Form style={{ width: "100%", maxWidth: '800px', margin: 'auto' }}>
                <Form.Item label={`评分制`}>
                    <Rate style={{ '--active-color': '#227597' }} count={10} value={Math.round(activeToken.score * 10 / activeMaxScore)} character={<SmileOutline />} onChange={v => changeActiveTokenScore(Math.round(v * activeMaxScore / 10))} />
                </Form.Item>
                <Form.Item label={<Space style={{ lineHeight: '1.7' }}>{`${activeMaxScore}分制：`}<Input style={{ textDecoration: 'underline', '--color': '#229880', '--font-size': '15px' }} value={activeToken.score} onChange={changeActiveTokenScore}></Input></Space>}>
                    <Slider max={activeMaxScore} style={{ '--fill-color': '#229880' }} value={activeToken.score} onChange={changeActiveTokenScore} />
                </Form.Item>
            </Form>
        </Popup>}
    </>;
}
